

  <div class="container">
    <div class="main-body">
    
        
    
          <div class="row gutters-sm">
            <div class="col-md-4 mb-3">
              <div class="card card1">
                <div class="card-body">
                  <div class="d-flex flex-column align-items-center text-center">
                    <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Admin" class="rounded-circle" width="150">
                    <div class="mt-3">
                      <h4>{{userData.name}}  
                        <img class="img" src="../../assets/edit.png" style="width:20px; height:20px"></h4>
                    
                     
                    </div>
                  </div>
                </div>
              </div>
             
            </div>
            <div class="col-md-8">
              <div class="card mb-3">
                <div class="card-body">
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Name</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      {{ userData.name }}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                  <div class="col-sm-3">
                    <h6 class="mb-0">Surname</h6>
                  </div>
                  <div class="col-sm-9 text-secondary">
                    {{ userData.surname }}
                  </div>
                </div>
                
                <hr>

           
                
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Email</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      {{ userData.mail }}
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Phone</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      {{userData.phone}}
                    </div>
                  </div>
                  <hr>
                 
                  
                  
                </div>
              </div>



            </div>
          </div>

          <div class="card2 card">


            <div class="text-center">

                <div class="d-flex flex-row text-center">

                
                
                <div class="d-flex flex-column ml-1 con">

                    <h1 class="mb-0 percent">31%</h1>
                    <span class="discount"> Personal Discount</span>
                    
                </div>
            </div>
                
            </div>

            <hr class="line">

            <span class="text-black">Ultimate discount for all customers across all country on all products at MarketPlace.com</span>

           
             

         </div>


         
        </div>
        
    </div>